<template>
  <van-nav-bar
    title="详情页"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
  >
    <template #right>
      <van-popover
        v-model:show="showPopover"
        theme="dark"
        :actions="actions"
        placement="bottom-end"
        @select="selectPopItem"
      >
        <template #reference>
          <van-icon name="ellipsis" size="18" />
        </template>
      </van-popover>
    </template>
  </van-nav-bar>

  <van-share-sheet
    v-model:show="showShare"
    title="立即分享给好友"
    :options="options"
    @select="shareSelect"
  />

  <div class="detail-swipe-box">
    <van-swipe class="detail-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item
        v-for="(item, index) in productSwiper"
        :key="index"
        @click="selctPicItem(index)"
      >
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-button class="btn-postion" type="danger" @click="playVideo"
      >播放视频</van-button
    >
  </div>

  <van-popup v-model:show="videoShow" teleport="body">
    <video
      v-if="videoShow"
      ref="refVideo"
      src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"
      controls
      preload="true"
    ></video>
  </van-popup>

  <div class="goodsNP">
    <p class="goodsName">{{ productContent.proname }}</p>
    <p class="goodsPrice">￥{{ productContent.originprice }}</p>
  </div>
  <div class="goodsOperation">
    <div class="goodsBuy">立即购买</div>
    <div class="goodsPrice1">￥{{ productContent.originprice }}</div>
    <div class="addCarList" @click="addCarList()">加入到购物车</div>
  </div>
</template>

<script setup lang="ts">
import { addCar } from "@/api/api";
import { useAPIProductDetail } from "../hooks/DetailViewHook";
import { useRoute, useRouter } from "vue-router";
import { Toast,showSuccessToast } from "vant";  

const {
  showPopover,
  actions,
  selectPopItem,
  showShare,
  options,
  shareSelect,
  productSwiper,
  selctPicItem,
  playVideo,
  productContent,
  videoShow,
} = useAPIProductDetail();

const route = useRoute();
const addCarList = async () => {
  const proid: any = route.query.id as any;
  const res = await addCar({
    userid: localStorage.getItem("userId"),
    proid: proid,
    num: "1",
  });
  showSuccessToast("加入购物车成功");
};
</script>

<style lang="scss" scoped>
.detail-swipe {
  .van-swipe__track {
    .van-swipe-item {
      width: 100%;
      img {
        display: block;
        width: 100%;
        height: 720px;
      }
    }
  }
}
.detail-swipe-box {
  position: relative;
  .btn-postion {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 20px;
    :deep(.van-button__content) {
      display: block;
      height: 30px;
      line-height: 30px;
    }
  }
}
.goodsNP {
  display: flex;
  justify-content: space-between;
  .goodsName {
    font-size: 24px;
    font-weight: bold;
  }
  .goodsPrice {
    font-size: 24px;
    margin-right: 20px;
    margin-top: 100px;
  }
}
.goodsOperation {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 18px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  .goodsBuy {
    width: 30%;
    background: #442719;
    color: white;
    height: 80px;
    text-align: center;
    line-height: 80px;
  }
  .addCarList {
    width: 30%;
    background: #442719;
    color: white;
    height: 80px;
    text-align: center;
    line-height: 80px;
  }
  .goodsPrice1 {
    color: #442719;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 26px;
    font-weight: bold;
  }
}
</style>
